<template>
    <div class="left-box">
        <div class="contetnt" ref="contetnt">
            <div class="name">{{ getName(detail.communityName) || '--' }}</div>
            <!-- <el-button class="back-btn" type="text" @click="goBack">返回指标</el-button> -->
            <el-tag type="warning" color="#fafbf2"
                v-if="detail.communityIndexObj && detail.communityIndexObj.sfxxq == '是'">10GPON小区</el-tag>
            <!-- <div class="address">地址：{{ detail.communityName || '--' }}</div> -->
            <div class="address">标准地址：{{ detail && detail.addressNameOld || '--'
            }}</div>
        </div>
        <div class="contetnt-bottom" :style="{ height: height + 'px' }">
            <div class="title">
                小区信息
            </div>
            <div class="copy-value" style="font-weight: bold;" v-if="haveIndicator">
                客户份额：<span
                    :style="(numObj.khfe && numObj.khfe < 60) || (detail.communityIndexObj && detail.communityIndexObj.khfe && (detail.communityIndexObj.khfe < 60)) ? { color: 'red' } : {}">{{
                        numObj.khfe || (detail.communityIndexObj && detail.communityIndexObj.khfe) || '--'
                    }}%</span>份额增幅：<span>{{ numObj.khfezf || '--' }}%</span><el-popover placement="right"
                    trigger="click" content="来源松果大数据">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="copy-value" style="font-weight: bold;" v-if="haveIndicator">
                宽带份额-移动：<span
                    :style="(numObj.kdfe && numObj.kdfe < 50) || (detail.communityIndexObj && detail.communityIndexObj.kdfe && (detail.communityIndexObj.kdfe < 50)) ? { color: 'red' } : {}">{{
                        numObj.kdfe || (detail.communityIndexObj && detail.communityIndexObj.kdfe) || '--' }}%</span>
                份额增幅：<span>{{ numObj.kdfezf && numObj.kdfezf != '0' ? numObj.kdfezf : detail.communityIndexObj &&
                    detail.communityIndexObj.kdfezf ? detail.communityIndexObj.kdfezf : '--' }}%</span>
                <el-popover placement="right" trigger="click" content="来自高德千亿级网络定位服务数据并增加去重算法">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="copy-value" style="font-weight: bold;" v-if="haveIndicator">
                宽带份额-联通：<span>{{ numObj.ltfe || '--' }}%</span>
                份额增幅：<span>{{ numObj.ltfezf && numObj.ltfezf != '0' ? numObj.ltfezf : '--' }}%</span>
                <el-popover placement="right" trigger="click" content="来自高德千亿级网络定位服务数据并增加去重算法">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="copy-value" style="font-weight: bold;" v-if="haveIndicator">
                宽带份额-电信：<span>{{ numObj.dxfe || '--' }}%</span>
                份额增幅：<span>{{ numObj.dxfezf && numObj.dxfezf != '0' ? numObj.dxfezf : '--' }}%</span>
                <el-popover placement="right" trigger="click" content="来自高德千亿级网络定位服务数据并增加去重算法">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="copy-value" style="font-weight: bold;" v-if="haveIndicator">
                千兆客户规模：<span>{{ numObj.qzkh || '--' }}</span>
                客户占比：<span>{{ numObj.qzkhzb || '--' }}%</span>
                <el-popover placement="right" trigger="click" content="来源经分，占比为千兆客户数/小区宽带客户到达数">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="copy-value" style="font-weight: bold;" v-if="haveIndicator">
                客户规模：<span>{{ numObj.khgm || '--' }}</span>
                规模增幅：<span>{{ numObj.khgmzf || '--' }}%</span>
                <el-popover placement="right" trigger="click" content="增幅为(T-1)月-(T-2)月">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="copy-value" style="font-weight: bold;" v-if="haveIndicator">
                家宽客户规模：<span>{{ numObj.jkkhgm || '--' }}</span>
            </div>
            <div class="copy-value" style="font-weight: bold;" v-if="haveIndicator">
                端口占用增幅：<span>{{ numObj.dkzyzf || '--' }}%</span>
                <el-popover placement="right" trigger="click" content="使用端口月环比变化：(T-1)月使用端口数-(T-2)月使用端口数、增幅百分比">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="copy-value"
                @dblclick="goCopyText(detail.cityName + '-' + detail.countyName + '-' + detail.gridName)">归属：{{
                    detail.cityName + '-' + detail.countyName + '-' + detail.gridName }}</div>
            <div class="copy-value" @dblclick="goCopyText(detail.communityName)">小区名称：{{ getName(detail.communityName)
                || '--' }}</div>
            <div class="copy-value">街道名称：{{ detail && detail.oltModelName || '--' }}
            </div>
            <div class="copy-value">小区类型：{{ detail && detail.communityType || '--' }}</div>
            <!-- <div class="copy-value">小区标准地址：{{ detail.communityIndexObj && detail.communityIndexObj.addressNameOld || '--' }}</div>
            <div class="copy-value">小区标准地址全称：{{ detail.communityIndexObj && detail.communityIndexObj.addressName || '--' }}</div> -->
            <div class="copy-value" v-if="haveIndicator">
                实占端口占用率：{{ detail.communityIndexObj && detail.communityIndexObj.szdkzyl || '--' }}%
                <el-popover placement="right" trigger="click" content="来源综资">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <!-- <div class="copy-value">目标潜客客户数：0</div>
            <div class="copy-value">户FTTR在网客户数：0</div> -->
            <div class="copy-value" v-if="haveIndicator">已占端口：{{ detail.communityIndexObj && detail.communityIndexObj.yzdks || '--' }}</div>
            <!-- <div class="copy-value">预占端口：{{ detail.communityIndexObj && detail.communityIndexObj.yuzdk || '--' }}</div> -->
            <div class="copy-value" v-if="haveIndicator">空闲端口：{{ detail.communityIndexObj && detail.communityIndexObj.kxdks || '--' }}</div>
            <div class="copy-value">
                是否10GPON：{{ detail.communityIndexObj && detail.communityIndexObj.sfxxq || '否' }}
                <el-popover placement="right" trigger="click" content="来源经分">
                    <img src="@/assets/img/icon-wh.png" class="icon-wh" slot="reference" />
                </el-popover>
            </div>
            <div class="copy-value" @dblclick="goCopyText(detail.communityCode)">ID：{{ detail.communityCode || '--' }}
            </div>
            <div class="copy-value" @dblclick="goCopyText(detail.addressName)">标准地址全称：{{ detail && detail.addressName ||
                '--' }} </div>
        </div>
    </div>
</template>
<script>
import { getNumDetail } from '@/api/api.js'
import moment from 'moment'
export default {
    props: {
        detail: {
            type: Object,
            default: () => { }
        },
        date: {
            type: String,
            default: ''
        },
        haveIndicator: {
            type: Boolean,
            default: true
        }
    },
    watch: {
        detail(val, oldVal) {
            if (val.communityCode != oldVal.communityCode) {
                this.getNumObject(val.communityCode)
            }
        },
        date(val, oldVal) {
            if (val != oldVal) {
                this.getNumObject(this.detail.communityCode)
            }
        },
    },
    data() {
        return {
            come1: false,
            come2: false,
            come3: false,
            come4: false,
            come5: false,
            come6: false,
            come11: false,
            come21: false,
            come31: false,
            come51: false,
            come61: false,
            numObj: {},
            height: window.innerHeight - 140
        }
    },
    mounted() {
        this.getNumObject(this.detail.communityCode)
        const that = this
        window.onresize = function (event) {
            const divHeight = that.$refs.contetnt.offsetHeight;
            that.height = window.innerHeight - divHeight + 20
        }
    },
    methods: {
        getNumObject(communityCode) {
            let statDate = moment(this.date).format('YYYYMMDD')
            getNumDetail({ statDate, communityCode }).then(res => {
                const divHeight = this.$refs.contetnt.offsetHeight;
                this.height = window.innerHeight - divHeight + 20
                let dataList = res?.res || []
                this.numObj = {
                    khfe: dataList.find(item => item.userCode == '45')?.userValue2 || '',
                    kdfe: dataList.find(item => item.userCode == '10')?.userValue1 || '',
                    ltfe: dataList.find(item => item.userCode == '42')?.userValue2 || '',
                    dxfe: dataList.find(item => item.userCode == '43')?.userValue2 || '',
                    khfezf: dataList.find(item => item.userCode == '45')?.userValue3 || '',
                    kdfezf: dataList.find(item => item.userCode == '10')?.userValue2 || '',
                    ltfezf: dataList.find(item => item.userCode == '42')?.userValue3 || '',
                    dxfezf: dataList.find(item => item.userCode == '43')?.userValue3 || '',
                    fzzxqs: dataList.find(item => item.userCode == '48')?.userValue2 || '',
                    dfe: dataList.find(item => item.userCode == '49')?.userValue2 || '',
                    xqgm: dataList.find(item => item.userCode == '50')?.userValue2 || '',
                    qzkh: dataList.find(item => item.userCode == '41')?.userValue2 || '',
                    qzkhzb: dataList.find(item => item.userCode == '41')?.userValue3 || '',
                    jkkhgm: dataList.find(item => item.userCode == '40')?.userValue2 || '',
                    khgm: dataList.find(item => item.userCode == '44')?.userValue2 || '',
                    khgmzf: dataList.find(item => item.userCode == '44')?.userValue3 || '',
                    dkzyzf: dataList.find(item => item.userCode == '46')?.userValue3 || '',
                }
            })
        },
        goCopyText(text) {
            let input = document.createElement('input');
            input.value = text || this.copyText;
            document.body.appendChild(input);
            input.select();
            document.execCommand('copy');
            document.body.removeChild(input);
            this.copyRight = false
            this.$message({
                message: '复制成功',
                type: 'success'
            })
        },
        // 获取小区名称
        getName(name) {
            let arr = name.split("|")
            return arr[arr.length - 1]
        },
        goBack() {
            this.$emit('goBack')
        },
        showPanel() {
            this.show = !this.show;
        }
    }
}
</script>
<style lang="scss" scoped>
.left-box {
    width: 350px !important;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

.name {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
}

.back-btn {
    position: absolute;
    right: 16px;
    top: 8px;
}

.address {
    margin-top: 10px;
    line-height: 20px;
    font-size: 14px;
}

.contetnt {
    border-bottom: 8px solid #f0f1f3;
    padding: 20px;
}

.contetnt-bottom {
    padding: 20px 4px 20px 20px;
    height: calc(100% - 140px);
    overflow-y: auto;

    .title {
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        height: 24px;
        background: url('../../../assets/img/line.png') no-repeat;
        padding-left: 24px;
        margin-bottom: 5px;
    }

    .copy-value {
        line-height: 32px;
        font-size: 14px;
        padding-left: 5px;
        position: relative;

        span {
            margin-right: 5px;
        }
    }

    .icon-wh {
        width: 18px;
        height: 18px;
        position: relative;
        top: 4px;
        cursor: pointer;
    }

    .come-text {
        font-weight: 400;
        border: 1px solid #dedede;
        border-radius: 3px;
        padding: 0 5px;
        color: #555;
        font-size: 12px;
        position: absolute;
        min-height: 24px;
        line-height: 24px;
        top: 3px;
        background: #fff;
    }
}

::v-deep .el-tag.el-tag--warning {
    background-color: #fff8e6;
    border-color: #fb9e4f;
    color: #fb9e4f;
}

::v-deep .el-tag--medium {
    height: 24px;
    line-height: 22px;
    font-size: 14px;
}
</style>